﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<title>注册 | {$system_name}</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!--图标-->
	<link rel="stylesheet" type="text/css" href="{_INDEX_STATIC_}/login/css/font-awesome.min.css">

	<!--布局框架-->
	<link rel="stylesheet" type="text/css" href="{_INDEX_STATIC_}/login/css/util.css">

	<!--主要样式-->
	<link rel="stylesheet" type="text/css" href="{_INDEX_STATIC_}/login/css/main.css">

	<!-- js 动作 -->
	<script src="{_INDEX_STATIC_}/lib/jquery/jquery.js"></script>
	<script src="{_INDEX_STATIC_}/lib/layer/layer.js"></script>

</head>

<body>

	<div class="login">
		<div class="container-login100">
			<div class="wrap-login100">
				<div class="login100-pic js-tilt" data-tilt>
					<img src="{_INDEX_STATIC_}/login/img/img-01.png" alt="IMG">
				</div>

				<div class="login100-form validate-form">
					<span class="login100-form-title">
						注册
					</span>

					<div class="wrap-input100 validate-input">
						<input id="account" class="input100" type="text" placeholder="请输入账号">
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-user" aria-hidden="true"></i>
						</span>
					</div>

					<div class="wrap-input100 validate-input">
						<input id="name" class="input100" type="text" placeholder="请输入昵称">
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-vcard" aria-hidden="true"></i>
						</span>
					</div>

					<div class="wrap-input100 validate-input">
						<input id="password" class="input100" type="password" placeholder="请输入密码">
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-lock" aria-hidden="true"></i>
						</span>
					</div>

					<div class="wrap-input100 validate-input">
						<input id="password2" class="input100" type="password" placeholder="请输入确认密码">
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-lock" aria-hidden="true"></i>
						</span>
					</div>

					<div class="wrap-input100 validate-input" style="position: relative;">
						<input id="captcha" class="input100" type="text" placeholder="请输入验证码" style="width: 65%;">
						<span class="focus-input100"></span>
						<span class="symbol-input100">
							<i class="fa fa-image" aria-hidden="true"></i>
						</span>
						<img id="captcha_src" src="{:url('login/verify')}"
							style="width: 35%;height: 45px; position: absolute;right: 0;top:0;">
					</div>

					<div class="container-login100-form-btn">
						<button class="login100-form-btn" id="login">
							点击注册
						</button>
					</div>

					<div class="text-center p-t-12">
						<!-- <a class="txt2" href="{_INDEX_STATIC_}/login/javascript:">
							忘记密码？
						</a> -->
					</div>

					<div class="text-center p-t-40">
						<!-- <a class="txt2" href="{_INDEX_STATIC_}/login/#">
							还没有账号？立即注册
							<i class="fa fa-long-arrow-right m-l-5" aria-hidden="true"></i>
						</a> -->
					</div>

				</div>
			</div>
		</div>
	</div>

	<script>
        $("#login").on('click', function () {

            var account = $('#account').val().trim();
            var password = $('#password').val().trim();
            var password2 = $('#password2').val().trim();
            var name = $('#name').val().trim();
            var captcha = $('#captcha').val().trim();

            if (account == '') {
                return layer.msg('账号不能为空', { icon: 2, time: 900 });
            }
            if (password == '') {
                return layer.msg('密码不能为空', { icon: 2, time: 900 });
            }
            if (password2 == '') {
                return layer.msg('确认密码不能为空', { icon: 2, time: 900 });
            }
            if (name == '') {
                return layer.msg('昵称不能为空', { icon: 2, time: 900 });
            }
            if (captcha == '') {
                return layer.msg('验证码不能为空', { icon: 2, time: 900 });
            }
            if (password != password2) {
                return layer.msg('两次密码不一致', { icon: 2, time: 900 });
            }

            $.ajax({
                url: "{:url('login/register')}",
                data: {
                    'account': account,
                    'password': password,
                    'password2': password2,
                    'name': name,
                    'captcha': captcha
                },
                type: "POST",
                dataType: "JSON",
                success: function (res) {
                    // 返回结果处理
                    if (res.code == 0) {
                        layer.msg(res.msg, { icon: 1, time: 900 }, function () {
							redirect_url("{:url('Login/index')}");
                        });
                    } else {
                        layer.msg(res.msg, { icon: 2, time: 900 }, function () {
                            refresh_verification_code();
                        });
                    }
                }
            });

        });

        // 验证码绑定事件
        // 用于刷新验证码
        $("#captcha_src").bind("click", function () {
            refresh_verification_code();
        });

        // 刷新验证码
        function refresh_verification_code() {
            var timestamp = Date.parse(new Date());
            $("#captcha_src").attr("src", "{:url('login/verify')}?t=" + timestamp);
            $("#captcha").val('');
        }

		// 重定向
        function redirect_url(url) {
            window.location.href = url;
        }
    </script>
</body>

</html>